<template>
	<view>
		<view class="header">
			<view class="u-flex-nowrap u-row-between u-flex page-font">
				<view class="u-flex">请输入机台号或扫码</view>
			</view>
			<view class="u-flex-nowrap u-row-around u-flex page-font">
				<u-form class="u-flex u-flex-nowrap u-row-around">
					<u-form-item>
						<u-input v-model="scanResult" :type="type" height=50 placeholder="请输入机台号" clearable />
					</u-form-item>
					<u-form-item class="u-flex u-row-center">
						<u-button size="medium" type="success" @click="bindUser">绑定</u-button>
					</u-form-item>
				</u-form>
				<view class="u-flex-nowrap u-flex-col u-row-center u-col-center" @click="scanFun">
					<u-icon name="scan" color="#2979ff" size="100"></u-icon>
					<view class="$u-type-primary">点击扫码</view>
				</view>
			</view>
		</view>
		
		<!-- 员工已经绑定的工位列表 -->
		<view>
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in bindList" :key="index">
				<view class="list-item">
					<view>机台号</view>
					<view>{{item.machineId}}</view>
				</view>
				<view class="list-item">
					<view>工位所需的部门</view>
					<view>{{item.department==null?'无':item.department}}</view>
				</view>
<!-- 				<view class="list-item">
					<view>工位所需职级</view>
					<view>{{item.mastJobClass==null?'无':item.mastJobClass}}</view>
				</view> -->
				<view class="list-item">
					<view>所需职级</view>
					<view style="max-width: 468rpx">{{item.jobClass==null?'无':item.jobClass}}</view>
				</view>	
				<view class="list-item">
					<view>员工工号</view>
					<view>{{item.jobNumber}}</view>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber2">
					<view>员工工号</view>
					<view>{{item.jobNumber2}}</view>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber3">
					<view>员工工号</view>
					<view>{{item.jobNumber3}}</view>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber4">
					<view>员工工号</view>
					<view>{{item.jobNumber4}}</view>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber5">
					<view>员工工号</view>
					<view>{{item.jobNumber5}}</view>
				</view>
				<view class="list-item">
					<view>工段编号</view>
					<view>{{item.sectionNo}}</view>
				</view>
				<view class="u-flex u-row-center">
					<u-button size="medium" type="warning" @click="secondConfirm(item.machineId,index)">解绑</u-button>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="show" :content="content" :async-close="true" :show-cancel-button="cancleBtn" @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
import { machineBind, machineList, machineUnbind,pt_stationBind,machineStationList,machineStationUnbind } from '../../utils/index.js'
	export default {
		data() {
			return {
				scanResult: '',		//条形码包含的字符串信息
				bindList: [],		//员工已经绑定工位的列表
				content: '是否确定解除该工位的绑定',		//弹出框的提示信息
				show: false,			//弹出框是否显示的条件
				cancleBtn: true,		//弹出框的“取消”按钮显示条件
				unBindInfo: {
					index: '',
					machineId: ''
				},
				user: uni.getStorageSync('user')
			}
		},
		methods: {
			// 点击按钮，启用扫码函数
			scanFun() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,							//扫码只能通过相机，不可在手机相册获得二维码
					success: function (res) {
						that.scanResult = res.result				//将扫码获得的内容赋值给scanResult
						that.bindUser()								//直接调用bindUser绑定函数
					},
					fail() {
						console.log('识别失败')
					}
				})
			},
			// 绑定工位函数
			async bindUser() {
				const {data} = await machineBind({machineId: this.scanResult})
				const errMsg = data.msg
				if(data.code == '1') {
					this.getBindInfo()
					this.$refs.uTips.show({
						title: '绑定成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 弹出框“确认”解绑的函数
			confirm() {
				this.unbindUser(this.unBindInfo)
				this.show = false
			},
			// 弹出框“取消”解绑的函数
			cancel() {
				this.show = false
			},
			// 解绑按钮绑定的函数
			// 点击“解绑”，调用函数打开的是对话框让用户确认
			//将对应的解绑信息复制给unBindInfo对象
			secondConfirm(machineId,index) {
				this.show = true
				this.unBindInfo = {machineId, index}
			},
			// 解绑员工工位
			async unbindUser({machineId,index}) {
				const quest = {}
				quest.machineId = machineId
				const {data} = await machineUnbind(quest)
				if(data.code == '1') {
					this.bindList.splice(index,1)							//解绑成功后将数据从DOM中去除
					this.$refs.uTips.show({
						title: data.msg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: data.msg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 获得已经绑定的工位信息
			async getBindInfo() {
				const {data} = await machineList()
				this.bindList = data.data
				console.log(data);
			}
		},
		// 在进入页面时就从后台请求获取绑定工位的信息
		onLoad() {
			let departmentName = uni.getStorageSync('user').departmentName
			uni.setNavigationBarTitle({
				title: '机台绑定'
			});
			this.getBindInfo()
		},
		// 下拉获取绑定信息
		onPullDownRefresh() {
			this.getBindInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			},3000)
		},
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 40rpx;
}
.list-item-wrapper {
	margin: 30rpx;
	background-color: #FFEFD5;
	padding: 10rpx
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
</style>
